<template>
  <div class="bg-white rounded-xl shadow-sm overflow-hidden backdrop-blur-sm bg-white/90 h-full">
    <!-- 顶部背景装饰 -->
    <div class="h-36 relative">
      <!-- 背景图片 -->
      <img src="https://images.unsplash.com/photo-1603366615917-1fa6dad5c4fa?q=80&w=2000&auto=format&fit=crop" 
           alt="背景" 
           class="w-full h-full object-cover" />
      <!-- 渐变遮罩 -->
      <div class="absolute inset-0 bg-gradient-to-r from-gray-900/90 via-gray-800/85 to-gray-900/90"></div>
      
      <!-- 装饰元素 -->
      <div class="absolute top-0 right-0 w-full h-full opacity-10">
        <svg width="100%" height="100%" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
          <circle cx="400" cy="400" r="200" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="10 15" />
          <circle cx="400" cy="400" r="300" fill="none" stroke="currentColor" stroke-width="1.5" stroke-dasharray="5 10" />
          <circle cx="400" cy="400" r="380" fill="none" stroke="currentColor" stroke-width="1" stroke-dasharray="3 5" />
        </svg>
      </div>
      
      <!-- 几何装饰元素 -->
      <div class="absolute inset-0 overflow-hidden opacity-20">
        <div class="absolute -top-10 -left-10 w-40 h-40 bg-purple-400/30 rounded-full blur-xl"></div>
        <div class="absolute top-5 right-10 w-20 h-20 bg-indigo-500/30 rounded-full blur-lg"></div>
        <div class="absolute bottom-0 left-1/3 w-60 h-16 bg-blue-400/20 rounded-full blur-xl"></div>
        
        <!-- 几何线条装饰 -->
        <svg class="absolute top-0 left-0 w-full h-full" viewBox="0 0 800 200" xmlns="http://www.w3.org/2000/svg">
          <path d="M0,100 Q200,150 400,100 T800,100" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/>
          <path d="M0,50 Q200,120 400,50 T800,50" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/>
          <path d="M0,150 Q200,80 400,150 T800,150" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/>
        </svg>
      </div>

      <!-- 额外的装饰元素 -->
      <div class="absolute inset-0 overflow-hidden">
        <!-- 抽象几何形状 -->
        <svg class="absolute top-0 right-0 h-full opacity-15" viewBox="0 0 400 150" xmlns="http://www.w3.org/2000/svg">
          <path d="M399,0 L399,150 L0,150 C100,120 200,90 300,60 C350,40 375,20 399,0 Z" fill="url(#grad1)" />
          <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.6" />
              <stop offset="100%" stop-color="#6366F1" stop-opacity="0.4" />
            </linearGradient>
          </defs>
        </svg>
        
        <!-- 点阵装饰 -->
        <div class="absolute inset-0 opacity-10">
          <div class="h-full w-full" style="background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px); background-size: 20px 20px;"></div>
        </div>
        
        <!-- 光效装饰 -->
        <div class="absolute -top-5 -left-5 w-32 h-32 bg-purple-500/20 rounded-full blur-2xl"></div>
        <div class="absolute top-0 right-10 w-24 h-24 bg-indigo-500/20 rounded-full blur-2xl"></div>
        
        <!-- 动态线条 -->
        <svg class="absolute bottom-0 left-0 w-full opacity-20" height="30" viewBox="0 0 1440 30" xmlns="http://www.w3.org/2000/svg">
          <path d="M0,15 C320,5 420,25 720,15 C1020,5 1120,25 1440,15 L1440,30 L0,30 Z" fill="#ffffff"></path>
        </svg>
      </div>
      
      <!-- 编辑按钮 -->
      <button v-if="userStore.isCurrentUser(user.id)"
              class="absolute top-4 right-4 bg-white/20 hover:bg-white/30 text-white rounded-lg px-4 py-1.5 text-sm font-medium backdrop-blur-sm transition-all flex items-center"
              @click="$emit('edit-profile')">
        <svg class="w-4 h-4 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
        </svg>
        编辑资料
      </button>
    </div>
    
    <!-- 用户基本信息 -->
    <div class="px-8 pb-8 pt-0 -mt-16">
      <div class="flex flex-col md:flex-row md:items-end">
        <!-- 头像和用户名区域 -->
        <div class="flex flex-col items-center md:items-start md:mr-8">
          <div class="relative mb-4">
            <img :src="user.avatar || 'https://via.placeholder.com/112'" alt="用户头像" class="w-28 h-28 rounded-full border-4 border-white shadow-md object-cover" />
            <span v-if="user.isVip" class="absolute bottom-1 right-1 bg-gradient-to-r from-indigo-600 to-purple-500 text-white text-xs font-bold px-2 py-0.5 rounded-full shadow-sm flex items-center">
              <svg class="w-3 h-3 mr-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg>
              VIP
            </span>
          </div>
          <h2 class="text-2xl font-bold text-gray-900 mb-1">{{ user.nickname }}</h2>
          <div class="flex items-center text-gray-500 mb-4">
            <svg class="w-4 h-4 mr-1.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
            <span class="text-sm">{{ user.email }}</span>
          </div>
        </div>
        
        <!-- 统计信息区域 -->
        <div class="flex-grow mt-4 md:mt-0">
          <div class="grid grid-cols-3 gap-4 md:gap-8 w-full">
            <div class="flex flex-col items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
              <div class="text-2xl font-bold text-gray-900">{{ user.pictureCount || 0 }}</div>
              <div class="text-sm text-gray-500">图片</div>
            </div>
            <div class="flex flex-col items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
              <div class="text-2xl font-bold text-gray-900">{{ user.fansCount || 0 }}</div>
              <div class="text-sm text-gray-500">粉丝</div>
            </div>
            <div class="flex flex-col items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
              <div class="text-2xl font-bold text-gray-900">{{ user.followCount || 0 }}</div>
              <div class="text-sm text-gray-500">关注</div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 用户简介 -->
      <div class="mt-6 p-5 bg-gray-50 rounded-lg">
        <h3 class="text-sm font-medium text-gray-700 mb-2 flex items-center">
          <svg class="w-4 h-4 mr-1.5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
          </svg>
          个人简介
        </h3>
        <p class="text-gray-600 text-sm">{{ user.profile || '这个人很神秘，什么都没有写~' }}</p>
      </div>
      
      <!-- 快捷操作按钮 -->
      <div class="mt-6 flex flex-wrap gap-3">
        <button v-if="!userStore.isCurrentUser(user.id)"
                class="flex items-center bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg px-4 py-2 text-sm font-medium transition-colors"
                @click="$emit('follow')">
          <svg class="w-4 h-4 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
          </svg>
          关注
        </button>
        <button v-if="!userStore.isCurrentUser(user.id)"
            class="flex items-center bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg px-4 py-2 text-sm font-medium transition-colors"
                @click="$emit('message')">
          <svg class="w-4 h-4 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
          </svg>
          发消息
        </button>
        <button class="flex items-center bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg px-4 py-2 text-sm font-medium transition-colors" @click="$emit('share')">
          <svg class="w-4 h-4 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
          </svg>
          分享
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { UserVo } from '@/api/user-service';
import {useUserStore} from "@/stores/useUserStore";

const userStore = useUserStore()
// 定义组件接收的属性
defineProps({
  user: {
    type: Object as () => UserVo,
    required: true
  },
});

// 定义组件可以触发的事件
defineEmits(['edit-profile', 'follow', 'message', 'share']);
</script> 